<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>提示页</title>
    <link rel="stylesheet" href="../basestyle.css">
    <link rel="stylesheet" href="../button/button.css">
    <link rel="stylesheet" href="../icon.css">
    <link rel="stylesheet" href="./msg.css">
</head>
<body>
<div class="page js_show">
    <div class="page__bd page__bd_spacing" style="padding-top: 200px ;">
        <a href="#msg_success" class="btn btn_primary">成功提示页</a>
        <a href="#msg_warn" class="btn btn_default">失败提示页</a>
    </div>

    <div class="page msg_success js_show" style="display: none;">
        <div class="msg">
            <div class="msg__icon-area"><i class="icon-success icon_msg"></i></div>
            <div class="msg__text-area">
                <h2 class="msg__title">操作成功</h2>
                <p class="msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现<a href="javascript:void(0);">文字链接</a></p>
            </div>
            <div class="msg__opr-area">
                <p class="btn-area">
                    <a href="javascript:history.back();" class="btn btn_primary">推荐操作</a>
                    <a href="javascript:history.back();" class="btn btn_default">辅助操作</a>
                </p>
            </div>
        </div>
    </div>

    <div class="page msg_warn js_show" style="display: none;">
        <div class="msg">
            <div class="msg__icon-area"><i class="icon-warn icon_msg"></i></div>
            <div class="msg__text-area">
                <h2 class="msg__title">操作失败</h2>
                <p class="msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现<a href="javascript:void(0);">文字链接</a></p>
            </div>
            <div class="msg__opr-area">
                <p class="btn-area">
                    <a href="javascript:history.back();" class="btn btn_primary">推荐操作</a>
                    <a href="javascript:history.back();" class="btn btn_default">辅助操作</a>
                </p>
            </div>
        </div>
    </div>
</div>
<script src="../zepto.min.js"></script>
<script>
    var $msg_success=$(".msg_success"),
        $msg_warn=$(".msg_warn"),
        $page__bd=$(".page__bd");
    $(".page__bd .btn").click(function (e) {
        var _this=$(this);
        _this.hasClass("btn_primary")?$msg_success.show():$msg_warn.show();
        $page__bd.hide();
    })
    $(".msg .btn").click(function (e) {
        $msg_success.hide();
        $msg_warn.hide();
        $page__bd.show();
    })
</script>
</body>
</html>